﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
<form id="form1">
<div>
    <!--HTML4只能用COOKIE在客户端存储数据，HTML5新增了Web Storage和Web SQL Database-->
    <!--前者用于临时或永久保存少量数据(<=5MB)，后者是客户端本地化的一套数据库系统，无需与服务端交互即可保存大量数据-->

    <!--WebStorageAPI可以区分会话与长期数据，sessionStorage(会话)与localStorage(客户端长期保存数据)-->
    <fieldset>
        <legend>sessionStorage保存与读取</legend>
        <input type="text" onchange="txtName_change(this)" size="30" />
        <input type="button" value="Load" onclick="GetValue()" />
        <p id="pStates"></p>
    </fieldset>
    <fieldset>
        <legend>localStorage保存与读取</legend>
        <ul>
            <li>用户名：<input type="text" id="txtName" /></li>
            <li>密码：<input type="text" id="txtPwd" /></li>
            <li>
                <input type="button" value="保存信息" onclick="SaveInfo()" />
                <input type="button" value="读取信息" onclick="ShowInfo()" />
                <input type="button" value="遍历信息" onclick="TraverseInfo()" />
                <input type="button" value="清除" onclick="ClearInfo()" />
            </li>
        </ul>
        <p id="pStates2"></p>
    </fieldset>
    <fieldset>
        <legend>使用localStorage保存json对象</legend>
        <ul>
            <li>Name:<input type="text" id="jsonName" /></li>
            <li>Age: <input type="text" id="jsonAge" /></li>
            <li>
                <input type="button" value="保存信息" onclick="SaveJson()" />
                <input type="button" value="遍历信息" onclick="TraverseJson()" />
            </li>
        </ul>
    </fieldset>

    <!--使用WebDB 是否有实用度有待以后观察……-->
    <fieldset>
        <legend>使用openDatabase打开与创建数据库</legend>
        <input type="button" onclick="CreateDB()" value="创建数据库" />
        <input type="button" onclick="TestConn()" value="测试连接"/>
    </fieldset>
</div>

</form>
<script type="text/javascript">
    //sessionStorage保存与读取(关闭浏览器会值清空)
    function txtName_change(v) {
        sessionStorage.setItem("strName", v.value);
        document.getElementById("pStates").innerHTML = sessionStorage.getItem("strName");
    }
    function GetValue() {
        document.getElementById("pStates").innerHTML = sessionStorage.getItem("strName");
    }

    //localStorage保存、读取与清除
    function SaveInfo() {
        localStorage.setItem("keyName", document.getElementById('txtName').value);
        localStorage.setItem("keyPwd", document.getElementById('txtPwd').value);
    }
    function ShowInfo() {
        var strName = localStorage.getItem("keyName");
        var strPwd = localStorage.getItem("keyPwd");
        //**判断是否为空很有必要，写法也很简洁
        if (strName) {
            document.getElementById('txtName').value = strName;
        }
        if (strPwd) {
            document.getElementById('txtPwd').value = strPwd;
        }
    }
    function TraverseInfo() {
        var str = "";
        for (var i = 0; i < localStorage.length; i++) {
            var strKey = localStorage.key(i);   //根据索引号取key
            var item = localStorage.getItem(strKey);
            str += "key: " + strKey + " value: " + item + "\t";            
        }
        alert(str);
    }
    function ClearInfo() {
        localStorage.removeItem("keyName"); //指定key清除
        localStorage.removeItem("keyPwd");
        localStorage.clear();               //清除所有的localStorage
    }

    //localStorage保存json信息
    function SaveJson() {
        var name = document.getElementById('jsonName').value;
        var age = document.getElementById('jsonAge').value;
        if (name.length > 0 && age.length > 0) {
            var jsonObj = new Object();
            jsonObj.Name = name;
            jsonObj.Age = age;
            var strJson = JSON.stringify(jsonObj);  //json对象转成字符串
            localStorage.setItem("JsonInfo",strJson);
        }        
    }
    function TraverseJson() {
        var jsonInfo = localStorage.getItem("JsonInfo");
        var data = JSON.parse(jsonInfo);    //转成json对象
        alert("Name:"+data.Name+" Age:"+data.Age);
    }

    //WebDB
    var db;
    function CreateDB() {
        //                DBName    Version  Describle  Size(byte)  Callback()
        db = openDatabase('Student', '1.0', 'StuManage', 2 * 1024 * 1024,
            function () {
                alert("数据库创建成功");
        });
    }
    function TestConn() {
        if (db) {
            alert('数据库连接成功');
        } else {
            alert('where\'s the db??')
        }
    }

</script>
</body>
</html>
